<template>
  <el-dialog v-model="dialogVisible" title="AI 分析" width="600">
    <div v-loading="loading">
      <Charts height="400px" :id="acc" type="radar" :option="option" />
      <h3 style="text-align: center">参考得分：{{ weekScore }}</h3>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import api from "@/api";

const emit = defineEmits(["refresh"]);

const dialogVisible = ref<boolean>(false);

const loading = ref(false);
const acc = ref("");

const option = ref({});
const weekScore = ref("");

watch(dialogVisible, (bool) => {
  if (!bool) {
    acc.value = "";
    option.value = {};
    weekScore.value = "";
  }
});

const open = (row: any) => {
  acc.value = row.acc;
  loading.value = true;
  api.matrix
    .selectMatrixByAcc(row.acc, row.weekNumber)
    .then((res: any) => {
      if (res.success) {
        option.value = {
          dataname: res.data.matrixNames,
          scores: res.data.matrixScores,
        };
        (weekScore.value = res.data.weekScore), (loading.value = false);
      }
    })
    .catch(() => {
      loading.value = false;
    });
  dialogVisible.value = true;
};

defineExpose({ open });
</script>
